{% extends "base.html" %}

{% block title %}DataView{% endblock %}

{% block page_content %}
<div class="page-header">
    {% include '_model_3d.html' %}
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title" style="font-size: x-large;">
                <i class="fa fa-bar-chart" aria-hidden="true"></i>
                内径信息
            </h3>
        </div>
        <div class="panel-body">
            <div id="uploader">
                <div class="btns">
                    <div id="picker1" style="float: left; ">
                        <i class="fa fa-cloud-upload"></i>
                        上传测量数据</div>

                    <div id="picker2" style="float: left; margin-left: 20px">
                        <i class="fa fa-cloud-upload"></i>
                        上传修正数据</div>

                    <button id="model3d" class="btn btn btn-success" data-toggle="modal" data-target="#myModal"
                            style="margin-left: 20px; float: left; width: 133px; height: 40px">
                        <i class="fa fa-area-chart" aria-hidden="true"></i>
                        三维点云</button>
                </div>
            </div>
            <div id="thelist" class="uploader-list"></div>
            <hr />
            <div id="main" style="width: 600px; height: 400px; float: left;"></div>
            <div style="float: left; width: 0%;"></div>
            <div style="float: left; width: 40%;">
                <table id="data_info" ></table>
                <hr />
                <div>
                    <button id="fetch_pre" class="btn btn btn-danger" style="float:left; width: 70px;">
                        <i class="fa fa-caret-left" aria-hidden="true"></i>
                        Pre</button>
                    <button id="fetch_next" class="btn btn btn-danger" style="float:left; margin-left: 10px; width: 70px;">
                        <i class="fa fa-caret-right" aria-hidden="true"></i>
                        Next</button>
                    <button id="search" class="btn btn btn-danger" style="float:right; width: 70px;">
                        <i class="fa fa-search" aria-hidden="true"></i>
                        Read</button>
                    <input id="z_index" type="text" class="form-control" placeholder="section num" style="width: 110px; float: right; margin-right: 10px">

                    <div style="float: left; width: 0%;"></div>

                </div>
                <div style="clear: both"></div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
    {{ super() }}
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='webuploader-0.1.5/webuploader.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='webuploader-0.1.5/style.css') }}">
    <script src="{{ url_for('static', filename='jquery-2.0.3.min.js') }}"></script>
    <script src="{{ url_for('static', filename='bootstrap-table.js') }}"></script>
    <script src="{{ url_for('static', filename='webuploader-0.1.5/webuploader.js') }}"></script>
    <script src="{{ url_for('static', filename='echarts.min.js') }}"></script>
    <script src="{{ url_for('static', filename='echarts_gl.min.js') }}"></script>
    <script type="text/javascript">

        $(window).ready(function () {

            var result;
            var current_z = 0;
            var section_data;
            var myChart = echarts.init(document.getElementById('main'));
            var option = {
                            title: {
                                text: '截面直径信息',
                                subtext: 'Powered by UNITY 3D',
                                left: 'center'
                            },
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    type: 'cross',
                                    animation: false,
                                    label: {
                                        backgroundColor: '#ccc',
                                        borderColor: '#aaa',
                                        borderWidth: 1,
                                        shadowBlur: 0,
                                        shadowOffsetX: 0,
                                        shadowOffsetY: 0,
                                        textStyle: {
                                            color: '#222'
                                        }
                                    }
                                },
                                formatter: function (params) {
                                    return "x : " + params[0].value[0].toFixed(2) + '<br />' + "y : " + params[0].value[1].toFixed(2);
                                }
                            },
                            xAxis: {},
                            yAxis: {},
                            series: [{
                                data: [[20, 120], [50, 200], [40, 50]],
                                type: 'line'
                            }]
                        };
            myChart.setOption(option);

            function show_section_info(data, z_index) {
                result = data;
                var D = [];
                var max = -10000;
                var min = 10000;
                var t_max = -10000;
                var t_min = 10000;
                var t_average = 0;
                var average = 0;
                var count = 0;
                for(var i = 0; i<result[z_index].length; i++)
                {
                    if(i+1800 >= result[z_index].length)
                    {
                        break;
                    }
                    if(parseFloat(result[z_index][i]) == 0 || parseFloat(result[z_index][i + 1800]) == 0){
                        continue;
                    }
                    D[i] = [(i*0.1), parseFloat(result[z_index][i]) + parseFloat(result[z_index][i + 1800])];

                    if(D[i][1] > max)
                    {
                        max = D[i][1];
                    }

                    if(D[i][1] < min)
                    {
                        min = D[i][1];
                    }
                    average = average + D[i][1];
                    count++;
                }
                average = average/count;
                myChart.setOption({
                    xAxis: {
                    },
                    yAxis: {
                        scale: true
                    },
                    series: [{
                        data: D,
                        type: 'line',
                        symbolSize: 1
                    }]
                });

                count = 0;
                for(var j = 0; j<result.length; j++) {
                    for(var i = 0; i<result[j].length; i++) {
                        if(i+1800 >= result[j].length)
                        {
                            break;
                        }
                        if(parseFloat(result[j][i]) == 0 || parseFloat(result[j][i + 1800]) == 0){
                            continue;
                        }
                        D[i] = [(i*0.1), parseFloat(result[j][i]) + parseFloat(result[j][i + 1800])];

                        if(D[i][1] > t_max)
                        {
                            t_max = D[i][1];
                        }

                        if(D[i][1] < t_min)
                        {
                            t_min = D[i][1];
                        }
                        t_average = t_average + D[i][1];
                        count++;
                    }
                }
                t_average = t_average/count;


                var table_data = [  {"name":"平均直径","value":t_average.toFixed(2)},
                                    {"name":"最大直径","value":t_max.toFixed(2)},
                                    {"name":"最小直径","value":t_min.toFixed(2)},
                                    {"name":"Z轴有效数据","value":String(result.length) + "  组"},
                                    {"name":"Z轴分辨率","value":"0.5 mm"},
                                    {"name":"XY有效数据","value":String(result[0].length) + "  组"},
                                    {"name":"XY分辨率","value":"0.1 度"},
                                    {"name":"当前截面","value":z_index},
                                    {"name":"截面平均直径","value":average.toFixed(2)},
                                    {"name":"截面最大直径","value":max.toFixed(2)},
                                    {"name":"截面最小直径","value":min.toFixed(2)}]
                $('#data_info').bootstrapTable('load', table_data);
            }

            $("#fetch_pre").click(function () {
                if(current_z-1 < 0) {
                    current_z = 0;
                }
                else {
                    current_z -= 1;
                }
                show_section_info(section_data, current_z)
            });

            $("#fetch_next").click(function () {
                if(current_z+1 >= section_data.length){
                    current_z = section_data.length - 1;
                }
                else{
                    current_z += 1;
                }
                show_section_info(section_data, current_z)
            });

            $("#search").click(function () {
                current_z = parseFloat($("#z_index").val());
                if(current_z >=0 && current_z < section_data.length)
                {
                    show_section_info(section_data, current_z)
                }
            });

            var myChart3d = echarts.init(document.getElementById('main3d'));
            var option3d = {
                    tooltip: {},
                    backgroundColor: '#fff',
                    xAxis3D: {
                        type: 'value'
                    },
                    yAxis3D: {
                        type: 'value'
                    },
                    zAxis3D: {
                        type: 'value'
                    },
                    grid3D: {
                        viewControl: {
                            projection: 'orthographic'
                        }
                    },
                    series: [{
                        type: 'scatter3D',
                        data: [],
                        symbolSize: 1
                    }]
                };

            myChart3d.setOption(option3d);

            $("#model3d").click(function () {
                var data3d = []
                if(section_data == undefined){
                    return;
                }
                for(var i = 0; i<section_data.length; i++)
                {
                    for(var j = 0;j<section_data[i].length; j++){
                        var angel = j * 0.1;
                        var x = parseFloat(section_data[i][j]) * Math.sin((Math.PI/180) * angel);
                        var y = parseFloat(section_data[i][j]) * Math.cos((Math.PI/180) * angel);
                        data3d.push([x ,y, i*0.5])
                    }
                }
                var option3d = {
                    tooltip: {},
                    backgroundColor: '#fff',
                    xAxis3D: {
                        type: 'value'
                    },
                    yAxis3D: {
                        type: 'value'
                    },
                    zAxis3D: {
                        type: 'value'
                    },
                    grid3D: {
                        viewControl: {
                            projection: 'orthographic'
                        }
                    },
                    series: [{
                        type: 'scatter3D',
                        data: data3d,
                        symbolSize: 1
                    }]
                };
                myChart3d.setOption(option3d);
            });

            var uploader = WebUploader.create({
                    swf: 'static/webuploader-0.1.5/Uploader.swf',
                    server: '/upload-file',
                    pick: '#picker1',
                    resize: false,
                    auto: true,
                    accept: {
                        title: 'CSV',
                        extensions: 'csv'
                    }
                });
            uploader.on('beforeFileQueued', function (file) {
                $('#thelist').empty();
            });
            uploader.on('fileQueued', function (file) {
                $('#thelist').append('<div id="' + file.id + '" class="item">' +
                    '<h4 class="info">' + file.name + '</h4>' +
                    '<p class="state">waiting...</p>' +
                '</div>');
            });
            uploader.on('uploadProgress', function (file, percentage) {
                var $li = $('#' + file.id),
                    $percent = $li.find('.progress .progress-bar');

                if (!$percent.length) {
                    $percent = $('<div class="progress progress-striped active">' +
                      '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                      '</div>' +
                    '</div>').appendTo($li).find('.progress-bar');
                }

                $li.find('p.state').text('uploading');

                $percent.css('width', percentage * 100 + '%');
            });
            uploader.on( 'uploadSuccess', function( file ) {
                $( '#'+file.id ).find('p.state').text('已上传');
                myChart.showLoading();
                $.getJSON("/calculate",
                function (data) { 
                    section_data = data;
                    current_z = 0;
                    myChart.hideLoading();
                    show_section_info(section_data, current_z);
                 });
            });

            uploader.on( 'uploadError', function( file ) {
                $( '#'+file.id ).find('p.state').text('上传出错');
            });

            uploader.on( 'uploadComplete', function( file ) {
                $( '#'+file.id ).find('.progress').fadeOut();
                uploader.reset();
            });

            var uploader1 = WebUploader.create({
                    swf: 'static/webuploader-0.1.5/Uploader.swf',
                    server: '/upload-fix-file',
                    pick: '#picker2',
                    resize: false,
                    auto: true,
                    accept: {
                        title: 'CSV',
                        extensions: 'csv'
                    }
                });
            uploader1.on('beforeFileQueued', function (file) {
                $('#thelist').empty();
            });
            uploader1.on('fileQueued', function (file) {
                $('#thelist').append('<div id="' + file.id + '" class="item">' +
                    '<h4 class="info">' + file.name + '</h4>' +
                    '<p class="state">waiting...</p>' +
                '</div>');
            });
            uploader1.on('uploadProgress', function (file, percentage) {
                var $li = $('#' + file.id),
                    $percent = $li.find('.progress .progress-bar');

                if (!$percent.length) {
                    $percent = $('<div class="progress progress-striped active">' +
                      '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                      '</div>' +
                    '</div>').appendTo($li).find('.progress-bar');
                }

                $li.find('p.state').text('uploading');

                $percent.css('width', percentage * 100 + '%');
            });
            uploader1.on( 'uploadSuccess', function( file ) {
                $( '#'+file.id ).find('p.state').text('已上传');
                myChart.showLoading();
                $.getJSON("/show",
                function (data) { 
                    section_data = data;
                    current_z = 0;
                    myChart.hideLoading();
                    show_section_info(section_data, current_z);
                 });
            });

            uploader1.on( 'uploadError', function( file ) {
                $( '#'+file.id ).find('p.state').text('上传出错');
            });

            uploader1.on( 'uploadComplete', function( file ) {
                $( '#'+file.id ).find('.progress').fadeOut();
                uploader1.reset();
            });

            $('#data_info').bootstrapTable({
                search:false,
                showRefresh:false,
                pagination:false,
                pageNumber:1,
                pageSize:10,
                pageList: [10, 25, 50, 100],
                classes: 'table-no-bordered',
                striped: true,
                columns: [
                {
                    field: 'name',
                    title: '参数',
                    align: 'center',
                    valign: 'middle'
                }, {
                    field: 'value',
                    title: '值',
                    align: 'center',
                    valign: 'middle'
                }],
                onRefresh: function () {

                }
            });
        })
    </script>
{% endblock %}
